<template>
	<view class="page">
		<scroll-view class="message-nav-box">
			<view class="nav-item-box">
				<view class="message-nav-item" :class="{'selected': navselected == item.id}"
					v-for="(item,index) in navList" :key="index" @click="navSelectedChange(item.id)">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y class="chat-scroll-box" :class="{'ispage-scroll' : ispage == false}"
			:scroll-top="scrollHeight">
			<checkbox-group @change="checkboxChange">
				<view v-for="(item,index) in messageList" :key="index">
					<view class="chat-box" @longpress="longtap" v-if="item.ismyself == '1'">
						<view class="time">
							{{item.sendtime}}
						</view>
						<label>
							<view class="userinfo-box">
								<view class="tag">{{item.messlevel}}</view>
								<view class="portrait">
									<image class="img" mode="aspectFit" src="/static/image/user.png"></image>
								</view>
							</view>
							<checkbox class="check-box" :value="item.id" v-if="bottomType != 0"
								:checked="item.checked" />
							<view class="chat-content" v-if="item.content != null">
								{{item.content}}
							</view>
							<view class="clear"></view>
							<view class="enclosure" @click="previewImage(item)" v-if="item.attachment != null">
								{{item.attachment}}</view>
						</label>
					</view>
					<view class="chat-box other" @longpress="longtap" v-if="item.ismyself == '0'">
						<view class="time">
							{{item.sendtime}}
						</view>
						<label>
							<view class="userinfo-box">
								<view class="portrait">
									<image class="img" mode="aspectFit" src="/static/image/user.png"></image>
								</view>
								<view class="name">
									{{item.author}}
								</view>
								<view class="tag">{{item.messlevel}}</view>
							</view>
							<checkbox class="check-box" :value="item.id" v-if="bottomType != 0"
								:checked="item.checked" />
							<view class="chat-content" v-if="item.content != null">
								{{item.content}}
							</view>
							<view class="clear"></view>
							<view class="enclosure" @click="previewImage(item)" v-if="item.attachment != null">
								{{item.attachment}}</view>
						</label>
					</view>
				</view>
			</checkbox-group>
			<view class="clearbottom">

			</view>
		</scroll-view>
		<view class="bottom-box" v-if="navselected == 0 && bottomType == 0" :style="{'bottom':keyboardHeight + 'px'}">
			<input class="chat-input" @blur="resetBottomChange" :adjust-position="false"
				@keyboardheightchange="keyboardChange" @input="inputChange" :value="chatcontent" placeholder="请输入"
				type="text" />
			<view class="button-box">
				<picker range-key="name" :value="larvelSelected" @change="bindPickerChange" :key="index"
					:range="larvelList">
					<view class="picker-box">
						<view class="picker-value">
							{{larvelList[larvelSelected].name}}
						</view>
						<view class="icon">
							<image class="push-icon" mode="aspectFit" src="/static/image/push_icon.png"></image>
							</view>
				</view>
				</picker>
				<view class="confirm-button" v-if="buttonType == 0" @click="binduploadChange">上传附件</view>
				<view class="confirm-button" v-if="buttonType == 1" @click="bindsendMessage">发送</view>
			</view>
		</view>
		<view class="hidden-bottom-box" v-if="bottomType == 1">
			<view class="cancel-button" @click="selectedBottom(0)">
				取消
			</view>
			<view class="hidden-button" @click="monitorHiddenChange">
				隐藏消息
			</view>
		</view>
		<view class="show-bottom-box" v-if="bottomType == 2">
			<view class="checkbox-box" @click="selectedAllChange">
				<image class="icon" v-if="!selectedAll" mode="aspectFit" src="/static/image/checkbox_icon.png"></image>
				<image class="icon" v-if="selectedAll" mode="aspectFit" src="/static/image/all_checkedbox_icon.png">
				</image>
				<view class="text">
					全选
				</view>
			</view>
			<view class="show-button" @click="monitorHiddenChange">
				显示消息
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	import {
		downloadImages,
		uploadImage
	} from '@/utils/utils.js';
	export default {
		props: {
			ispage: {
				type: Boolean,
				default: true,
			},
			Taskid: { // 任务id
				type: String,
				default: null
			}
		},
		data() {
			return {
				checkboxList: [], // 多选框选中项
				messageList: [], // 消息列表
				scrollHeight: 999, // 滚动条高度
				imgList: [], // 临时存放图片池
				fileList: [], // 文件临时存放池
				selectedAll: false, // 全选按钮状态
				bottomType: 0, // 底部操作栏状态（0为聊天操作栏，1为隐藏信息操作栏，2为隐藏信息恢复栏） 
				keyboardHeight: 0, // 键盘高度
				navselected: 0, // 消息导航选中id
				buttonType: 0, // 按钮显示方式状态（0为上传附件；1为发送按钮）
				larvelSelected: 2, // 等级选择框选中下标
				chatcontent: '', // 对话框内容
				navList: [{
						id: 0,
						name: '消息'
					},
					{
						id: 1,
						name: '隐藏消息'
					},
				],
				larvelList: [{
						id: 1,
						name: '1级'
					},
					{
						id: 2,
						name: '2级'
					},
					{
						id: 3,
						name: '3级'
					},
					{
						id: 4,
						name: '4级'
					},
					{
						id: 5,
						name: '5级'
					}
				],
			}
		},
		mounted() {
			this.MonitorListTask();
		},
		methods: {
			/**
			 * 初始化消息列表
			 */
			MonitorListTask: function() {
				let that = this;
				let messageList = that.messageList;
				api.MonitorListTask({
					id: that.Taskid,
					hidden: that.navselected
				}).then(res => {
					for (let i = 0; i < res.data.result.length; i++) {
						res.data.result[i].checked = false;
					}
					messageList.push.apply(messageList, res.data.result);
					that.messageList = messageList;
					that.scrollHeight = 99999 + Math.random();
				})
			},
			/**
			 * 全选按钮点击改变触发事件
			 */
			selectedAllChange: function() {
				let selectedAll = this.selectedAll;
				let messageList = this.messageList;
				let checkboxList = [];
				for (let i = 0; i < messageList.length; i++) {
					checkboxList.push(messageList[i].id);
					messageList[i].checked = !selectedAll;
				}
				if (selectedAll == false) {
					this.checkboxList = checkboxList;
				} else {
					this.checkboxList = [];
				}
				this.messageList = messageList;
				this.selectedAll = !selectedAll;
			},
			/**
			 * 消息导航栏改变触发事件
			 */
			navSelectedChange: function(index) {
				this.navselected = index;
				if (index == 1) {
					this.bottomType = 2;
				} else if (index == 0) {
					this.bottomType = 0;
				}
				this.messageList = [];
				this.selectedAll = false;
				this.MonitorListTask();
			},
			/**
			 * 点击预览下载图片
			 */
			previewImage: function(item) {
				let that = this;
				let type = 'image';
				let fileName = item.attachmentpath.lastIndexOf(".");
				let fileFormat = item.attachmentpath.substring(fileName + 1, item.attachmentpath.length);
				let data = [];
				console.log('文件名', fileFormat);
				if (fileFormat == 'doc' || fileFormat == 'xls' || fileFormat == 'ppt' || fileFormat == 'pdf' ||
					fileFormat == 'docx' || fileFormat == 'xlsx' || fileFormat == 'pptx') {
					let fileList = that.fileList;
					type = 'file';
					console.log('fileList', fileList);
					if (fileList.length > 0) {
						data = fileList.filter(res => {
							return res.id == item.id;
						});
					}
				} else {
					type = 'image';
					let imgList = that.imgList;
					data = imgList.filter(res => {
						return res.id == item.id;
					});
				}

				if (data.length > 0) {
					if (type == 'image') {
						let arr = [];
						arr.push(data[0].tempFilePath);
						uni.previewImage({
							urls: arr,
						});
					} else {
						uni.openDocument({
							filePath: escape(data[0].tempFilePath),
							showMenu: false,
							success: function(res) {
								console.log('打开文档成功');
							},
							fail: function(err) {
								uni.showToast({
									title: '不支持失败文件类型',
									icon: 'none',
									duration: 2000
								});
							},
						});
					}

				} else {
					console.log('path', item.attachmentpath);
					downloadImages(item.attachmentpath).then(res => {
						console.log(res);
						if (type == 'image') {
							let arr = [];
							arr.push(res.tempFilePath);
							uni.previewImage({
								urls: arr,
							});
							imgList.push(Object.assign({
								tempFilePath: res.tempFilePath
							}, item));
							that.imgList = imgList;
						} else if (type == 'file') {
							let fileList = that.fileList;
							fileList.push(Object.assign({
								tempFilePath: res.tempFilePath
							}, item));
							that.fileList = fileList;
							uni.openDocument({
								filePath: res.tempFilePath,
								showMenu: false,
								success: function(res) {

								},
								fail: function(err) {
									uni.showToast({
										title: '不支持失败文件类型',
										icon: 'none',
										duration: 2000
									});
								},
							});
						}
					})
				}
			},
			/**
			 * 等级选择框选中触发事件
			 */
			bindPickerChange: function(e) {
				console.log(e);
				this.larvelSelected = e.target.value;
			},
			/**
			 * 上传附件点击触发事件
			 */
			binduploadChange: function() {
				let that = this;
				let larvelSelected = that.larvelSelected;
				let larvelList = that.larvelList;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						uploadImage(res.tempFilePaths[0]).then(results => {
							results = JSON.parse(results);
							let data = {
								"attachment": results.data.name,
								"attachmentpath": results.data.url,
								"messlevel": larvelList[larvelSelected].name,
								"sendtime": "",
								"taskid": that.Taskid
							};
							that.sendMessage(data);
						})

					}
				});
			},
			/**
			 * 键盘变化触发事件
			 */
			keyboardChange: function(e) {
				if (this.ispage == false) {
					this.keyboardHeight = e.target.height / 1.3;
				} else {
					this.keyboardHeight = e.target.height;
				}

			},
			/**
			 * 键盘收起触发事件
			 */
			resetBottomChange: function() {
				this.keyboardHeight = 0;
			},
			/**
			 * 监听多选框选中触发事件
			 */
			checkboxChange: function(e) {
				let messageList = this.messageList;
				let selectedAll = this.selectedAll;
				if (e.detail.value.length == messageList.length && selectedAll == false) {
					this.selectedAll = true;
				} else if (e.detail.value.length < messageList.length && selectedAll == true) {
					this.selectedAll = false;
				}
				this.checkboxList = e.detail.value;
			},
			/**
			 * 隐藏按钮触发事件
			 */
			monitorHiddenChange: function() {
				let that = this;
				let checkboxList = that.checkboxList;
				let data = {
					hidden: 0,
					idarray: that.checkboxList
				};
				let navselected = that.navselected;
				let bottomType = that.bottomType;
				let modalText = '';
				if (navselected == 0) {
					data.hidden = 1;
					modalText = '隐藏'
				} else if (navselected == 1) {
					data.hidden = 0;
					modalText = '显示'
				}
				console.log('checkboxList', checkboxList);
				if (checkboxList.length == 0) {
					uni.showToast({
						title: '请选中要' + modalText + '信息',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				uni.showModal({
					title: '',
					content: '确定要' + modalText + '信息？',
					success: function(res) {
						if (res.confirm) {
							api.monitorHiddenChange(data).then(result => {
								uni.showToast({
									title: modalText + '成功',
									duration: 2000,
									complete: function() {
										that.messageList = [];
										that.checkboxList = [];
										if (navselected == 0 && bottomType == 1) {
											that.selectedBottom(0);
										}
										that.MonitorListTask();
									},
								});

							})
						} else if (res.cancel) {

						}
					}
				});
			},
			longtap: function() {
				let bottomType = this.bottomType;
				let navselected = this.navselected;
				if (navselected == 0 && bottomType == 0) {
					this.bottomType = 1;
				}
				console.log('bottomType', this.bottomType);
			},
			/**
			 * 取消按钮触发事件
			 */
			selectedBottom: function(index) {
				let bottomType = this.bottomType;
				if (bottomType == 0) {
					this.bottomType = 1;
				} else if (bottomType != 0) {
					this.bottomType = index
				}
				console.log(this.bottomType);
			},
			/**
			 * 监听聊天框输入字符触发事件
			 */
			inputChange: function(e) {
				console.log(e.target.value);
				this.chatcontent = e.target.value;
				let chatcontent = e.target.value;
				let buttonType = this.buttonType;
				if (chatcontent.length > 0 && buttonType == 0) {
					this.buttonType = 1;
				} else if (chatcontent.length == 0 && buttonType == 1) {
					this.buttonType = 0;
				}
			},
			/**
			 * 绑定发送按钮
			 */
			bindsendMessage: function() {
				let that = this;
				let larvelSelected = that.larvelSelected;
				let larvelList = that.larvelList;
				let data = {
					content: that.chatcontent,
					messlevel: larvelList[larvelSelected].name,
					sendtime: '',
					taskid: that.Taskid
				};
				that.sendMessage(data);
			},
			/**
			 * 发送消息
			 */
			sendMessage: function(data) {
				let that = this;
				api.monitorSend(data).then(res => {
					uni.showToast({
						title: '发送成功',
						icon: 'success',
						duration: 2000,
						complete: function() {
							that.buttonType = 0;
							that.chatcontent = '';
							that.messageList = [];
							that.MonitorListTask();
						},
					});

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		overflow: hidden;
	}

	.message-nav-box {
		white-space: nowrap;
		background-color: white;

		.nav-item-box {
			display: flex;
			margin: 0 20rpx;

			.message-nav-item {
				width: fit-content;
				padding: 0 20rpx;
				font-size: 28rpx;
				line-height: 60rpx;
				color: #868686;
			}

			.message-nav-item:first-child {
				padding-left: 0;
			}

			.selected {
				color: #1e88b0;
				position: relative;
			}

			.selected::after {
				content: "";
				position: absolute;
				width: 100%;
				height: 4rpx;
				background-color: #1e91c0;
				left: 0;
				bottom: 0;
			}
		}
	}

	.chat-scroll-box {
		width: 100%;
		height: calc(100vh - 240rpx);
		overflow: hidden;

		.chat-box {
			overflow: hidden;
			position: relative;
			margin-top: 20rpx;

			.time {
				text-align: center;
				color: #686868;
				font-size: 28rpx;
				margin: 10rpx 0;
			}

			.userinfo-box {
				float: right;
				display: flex;
				margin-right: 20rpx;
				margin-top: 20rpx;
				overflow: hidden;

				.tag {
					background-color: #fb940b;
					color: white;
					width: fit-content;
					padding: 0 20rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					border-radius: 10rpx;
				}

				.portrait {
					margin-left: 20rpx;
					background-color: #1b90c6;
					width: 50rpx;
					height: 50rpx;
					border-radius: 100%;

					.img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.check-box {
				position: absolute;
				left: 20rpx;
				top: 70%;
			}

			.chat-content {
				clear: both;
				float: right;
				width: 500rpx;
				background-color: #97e96b;
				margin-right: 90rpx;
				margin-top: 20rpx;
				border-radius: 10rpx;
				line-height: 50rpx;
				padding: 10rpx;
			}

			.clear {
				clear: both;
				width: 100%;
				overflow: hidden;
			}

			.enclosure {
				clear: both;
				text-align: center;
				color: #6f60bf;
				font-size: 28rpx;
				width: calc(100% - 200rpx);
				overflow: hidden;
				word-wrap: break-word;
				margin: 0 auto;
				margin-top: 20rpx;
			}
		}

		.other {
			.userinfo-box {
				float: left;

			}

			.name {
				font-size: 28rpx;
				padding: 0 10rpx;
				line-height: 50rpx;
			}

			.chat-content {
				float: left;
				margin-right: 0;
				margin-left: 80rpx;
			}
		}
	}

	.ispage-scroll {
		height: calc(60vh - 240rpx);
	}

	.bottom-box {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		position: absolute;
		left: 0;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		background-color: white;
		display: flex;

		.chat-input {
			background-color: #efefef;
			height: 70rpx;
			flex: 1;
		}

		.button-box {
			display: flex;

			.picker-box {
				display: flex;
				height: 70rpx;
				border: 2rpx solid #f4f4f4;
				padding: 0 20rpx;
				margin-left: 20rpx;
				border-radius: 10rpx;

				.picker-value {
					line-height: 70rpx;
				}

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin: 15rpx 0;

					.push-icon {
						width: 100%;
						height: 100%;
					}
				}
			}

			.confirm-button {
				color: white;
				height: 70rpx;
				width: fit-content;
				width: 150rpx;
				line-height: 70rpx;
				text-align: center;
				margin-left: 20rpx;
				background-color: #37ae86;
				border-radius: 10rpx;
				font-size: 28rpx;
			}
		}
	}

	.hidden-bottom-box {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		position: absolute;
		left: 0;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		background-color: white;
		display: flex;

		.cancel-button {
			width: 150rpx;
			color: white;
			border-radius: 10rpx;
			text-align: center;
			font-size: 28rpx;
			background-color: #d9d9d9;
			line-height: 70rpx;
		}

		.hidden-button {
			flex: 1;
			margin-left: 60rpx;
			background-color: #fe9900;
			line-height: 70rpx;
			color: white;
			border-radius: 10rpx;
			text-align: center;
			font-size: 28rpx;
		}
	}

	.show-bottom-box {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		position: absolute;
		left: 0;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		background-color: white;
		display: flex;
		justify-content: space-between;

		.checkbox-box {
			display: flex;
			margin: 15rpx 0;

			.icon {
				width: 40rpx;
				height: 40rpx;
			}

			.text {
				font-size: 26rpx;
				margin-left: 10rpx;
				line-height: 40rpx;
			}
		}

		.show-button {
			background-color: #37ae86;
			color: white;
			line-height: 70rpx;
			text-align: center;
			flex: 1;
			margin-left: 80rpx;
			border-radius: 10rpx;
			font-size: 28rpx;
		}
	}

	.clearbottom {
		width: 100%;
		height: calc(constant(safe-area-inset-bottom) + 10rpx);
		height: calc(env(safe-area-inset-bottom) + 10rpx);
	}
</style>
